<!--
 * @Description: 登录页
 * @Author: huahua
 * @Date: 2021-11-02 17:21:17
 * @LastEditTime: 2021-11-09 15:29:22
 * @LastEditors: huahua
-->
<template>
	<div class="login">
		<div class="loginBox">
			<div class="left_box">
				<div class="box_img">
					<img src="@/assets/images/loginBac2.gif" alt="" />
				</div>
			</div>
			<div class="rig_box">
				<!-- 登陆页 -->
				<div class="box_form box_login" v-if="loginSta">
					<h2>登陆</h2>
					<a-form-model
						ref="loginForm"
						:model="loginForm"
						:rules="loginRules"
						:label-col="layout.labelCol"
						:wrapper-col="layout.wrapperCol"
						labelAlign="left"
					>
						<a-form-item label="用户名" prop="username">
							<a-input v-model="loginForm.username" size="large" placeholder="请输入用户名" />
						</a-form-item>
						<a-form-item label="密码" prop="password">
							<a-input v-model="loginForm.password" size="large" placeholder="请输入密码" type="password" />
						</a-form-item>
						<a-form-item label="验证码" prop="captcha">
							<a-input v-model="loginForm.captcha" size="large">
								<img slot="addonAfter" :src="codeImg" style="width:100px" @click="getCodePngFn" class="cursorPointer" />
							</a-input>
						</a-form-item>
						<div class="forgetPass">
							<p class="textAlignRig">忘记密码</p>
						</div>
						<!-- 提交重置区域 -->
						<a-form-item>
							<a-button type="primary" @click="onSubmitLogin" class="button_box" size="large">
								登录
							</a-button>
						</a-form-item>
						<a-form-item>
							<a-button @click="registerFn" class="button_box" size="large">
								注册
							</a-button>
						</a-form-item>
					</a-form-model>
				</div>
				<div v-if="!loginSta" class="box_form box_register">
					<h2>注册</h2>
					<a-form-model
						ref="registerForm"
						:model="registerForm"
						:rules="registerRule"
						:label-col="layout.labelCol"
						:wrapper-col="layout.wrapperCol"
						labelAlign="left"
					>
						<a-form-item label="昵称" prop="name">
							<a-input v-model="registerForm.name" :disabled="editSta" size="large" placeholder="请输入昵称" />
						</a-form-item>
						<a-form-item label="用户名" prop="username">
							<a-input v-model="registerForm.username" size="large" placeholder="请输入用户名" />
						</a-form-item>
						<a-form-item label="密码" prop="password">
							<a-input v-model="registerForm.password" size="large" placeholder="请输入密码" />
						</a-form-item>
						<a-form-item label="确认密码" prop="againPassword">
							<a-input v-model="registerForm.againPassword" size="large" placeholder="请输入确认密码" />
						</a-form-item>
						<!-- 提交重置区域 -->
						<a-form-item class="button">
							<a-button type="primary" @click="onSubmitRegister" class="button_box" size="large">
								注册
							</a-button>
						</a-form-item>
					</a-form-model>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import cookie from "@/utils/cookie";
	export default {
		components: {},
		name: "login",
		data() {
			return {
				codeImg: "",
				uuid: "",
				loginSta: true,
				loginForm: {
					captcha: "",
					username: "",
					password: "",
				},
				registerForm: {},
				loginRules: {},
				registerRule: {},
				layout: {
					labelCol: { span: 24 },
					wrapperCol: { span: 24 },
				},
			};
		},
		props: {},
		computed: {},
		created() {
			this.getCodePngFn();
		},
		methods: {
			getCodePngFn() {
				this.uuid = this.getUuid();
				this.uuid ? this.getCodePng(this.uuid) : "";
			},
			getCodePng(uuid) {
				const params = {
					uuid,
					emulateJSON: true,
				};
				this.$http.getCodeById(params).then(res => {
					console.log(146, res);
					this.codeImg = window.URL.createObjectURL(res);
				});
			},
			// 生成uuid
			getUuid() {
				return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
					const r = (Math.random() * 16) | 0,
						v = c == "x" ? r : (r & 0x3) | 0x8;
					return v.toString(16);
				});
			},
			// 提交注册表单
			onSubmitRegister() {},
			registerFn() {
				this.loginSta = false;
			},
			loginFn(params) {
				this.$http.login(params).then(res => {
					console.log("122", res);
					if (res.access_token) {
						cookie.setCookie("sys_token", res.access_token);
					}
				});
			},
			onSubmitLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						//  验证必填
						const params = {
							uuid: this.uuid,
							...this.loginForm,
						};
						this.loginFn(params);
					} else {
						//验证失败
						return false;
					}
				});
			},
		},
	};
</script>
<style lang="less" type="text/less" scoped>
	.login {
		width: 100%;
		height: 100vh;
		background: rgb(59, 205, 149);
		display: flex;
		justify-content: center;
		align-items: center;
		.loginBox {
			width: 70%;
			height: 70%;
			background: #c3faea;
			margin: 0 auto;
			border-radius: 30px;
			display: flex;
			box-shadow: 0px 8px 48px #34b584;
			overflow: hidden;

			.left_box {
				width: 50%;
				height: 100%;
				// background: url("~@/assets/images/loginBac.png") center no-repeat;
				.box_img {
					width: 100%;
					height: 100%;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					img {
						display: block;
						width: 100%;
					}
				}
			}
			.rig_box {
				flex: 1;
				height: 100%;
				background: #fff;
				border-radius: 0 30px 30px 0;
				.box_form {
					width: 100%;
					height: 100%;
					overflow: hidden;
					margin: 0 auto;
					padding: 70px;
					// padding-top: 100px;
					h2 {
						font-size: 30px;
						font-weight: bold;
						position: relative;
					}
					h2::before {
						content: "";
						display: block;
						width: 62px;
						height: 5px;
						background: #3acb93;
						position: absolute;
						left: 0;
						bottom: -1px;
						border-radius: 10px;
						opacity: 0.5;
					}
				}
				.box_register,
				.box_login {
					padding-top: 50px;
				}
			}
			.button_box {
				width: 100%;
			}
		}
		.forgetPass {
			margin-bottom: 40px;
		}
	}
</style>
<style lang="less" type="text/less">
	.login {
		.ant-input {
			background: #eaefed;
			border: none;
			border-radius: 7px;
			transition: all 0.2s;
		}
		.ant-input:focus {
			background: #fff;
			border: 1px solid #6ce4b6;
			box-shadow: 0px 0px 7px #3ac992;
		}
		.ant-form-item label {
			font-size: 16px;
		}
		.ant-form-item {
			margin-bottom: 16px;
		}
		.ant-input-group-addon {
			padding: 0;
			border-color: #eaefed;
		}
	}
</style>
